<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel>.layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-md12">
                    <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                </div>
                <div class="layui-col-xs12 layui-col-md12">
                    <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'echarts'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                echarts = layui.echarts;



            function getHRMData() {
                $.ajax({
                    url: 'http://localhost:8080/api/employee?operation=getDepartmentEntryCounts',
                    method: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        // 成功获取数据后的处理逻辑
                        if (data.code === 0 && data.data) {
                            var responseJson = data.data;

                            // 创建一个空数组来存储部门名称和入职人数
                            var departments = [];
                            var entryCounts = [];

                            // 遍历返回的 JSON 数据并构建数组
                            for (var i = 0; i < responseJson.length; i++) {
                                var departmentData = responseJson[i];
                                departments.push(departmentData.department);
                                entryCounts.push(departmentData.entry_count);
                            }

                            // 构建最终的数据对象
                            var hrmData = {
                                departments: departments,
                                entryCounts: entryCounts
                            };

                            // 在这里处理返回的数据，hrmData 变量包含部门入职人数数据
                            console.log(hrmData);



                            /**
          * 报表功能 - 按部门入职人数划分
          */
                            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

                            var optionRecords = {
                                title: {
                                    text: '部门入职人数统计'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: hrmData.departments
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name: '入职人数',
                                        type: 'bar',
                                        data: hrmData.entryCounts
                                    }
                                ]
                            };

                            echartsRecords.setOption(optionRecords);

                            /**
                             * 玫瑰图表 - 部门比例
                             */
                            var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');

                            var optionPies = {
                                title: {
                                    text: '部门入职人数比例',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data: hrmData.departments
                                },
                                series: [
                                    {
                                        name: '部门入职人数',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: hrmData.departments.map(function (department, index) {
                                            return { value: hrmData.entryCounts[index], name: department };
                                        }),
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };

                            echartsPies.setOption(optionPies);

                            // echarts 窗口缩放自适应
                            window.onresize = function () {
                                echartsRecords.resize();
                                echartsPies.resize();
                            }
                        } else {
                            console.error('获取数据失败：' + data.msg);
                        }
                    },
                    error: function (xhr, status, error) {
                        // 请求失败时的处理逻辑
                        console.error('请求失败：' + error);
                    }
                });
            }


            getHRMData()





        });
    </script>
</body>

</html>